<template>
  <div class="app">
    <h2 style="text-align: center;background-color: #cccccc">商品分类</h2>
   <el-menu class="menu" default-active="1">
    <el-menu-item
        v-for="item in titleList"
        :key="item.id"
        :index="item.id.toString()"
        @click="handleClick(item.path)"
    >
      {{item.title}}
    </el-menu-item>
  </el-menu>
    <router-view></router-view>
  </div>

</template>

<script lang="ts" setup name="">
import {RouterView,useRouter,useRoute} from "vue-router";
import {onMounted, watchEffect} from "vue";
let router = useRouter();
let route = useRoute();
let titleList= [{title:'家具家电',id:1,pathname:"group_t1",path:"/group_t1"},
                {title:'儿童玩具',id:2,pathname:"group_t2",path:"/group_t2"},
                {title:'床上用品',id:3,pathname:"other",path:"/other"},
                {title:'电子电器',id:4,pathname:"other",path:"/other"},
                {title:'品牌零食',id:5,pathname:"other",path:"/other"},
                {title:'大牌香水',id:6,pathname:"other",path:"/other"},
                {title:'男士服装',id:7,pathname:"other",path:"/other"},
                {title:'女士服装',id:8,pathname:"other",path:"/other"},
                {title:'儿童服装',id:9,pathname:"other",path:"/other"},
                {title:'饮料大全',id:10,pathname:"other",path:"/other"},
                {title:'超值百货',id:11,pathname:"other",path:"/other"},
                {title:'婴幼产品',id:12,pathname:"other",path:"/other"},
                {title:'百货大全',id:13,pathname:"other",path:"/other"},
                {title:'趣味图书',id:14,pathname:"other",path:"/other"},
                {title:'运动户外',id:15,pathname:"other",path:"/other"},
]
onMounted(() => {
  router.push("/group_t1");
})
function handleClick(path:string){
  router.push(path);
}
watchEffect(()=>{
  if (route.path==="/group"){
    router.push("/group_t1");
  }
})
</script>

<style scoped>
.menu{
  overflow-y: auto;
  flex: 1;
  height: 715px;
  width: 30%;
}

</style>